<template>
  <div class="category" id="category">
    <nav-bar class="category-nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>

    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem" />

      <scroll id="tab-content" :data="[categoryData]" ref="scroll" @scroll="contentScroll" 
       :probeType="3"  :pullUpLoad="true" @pullingUp="loadMore">
        <div>
          <tab-content-category :subcategories="showSubcategory"></tab-content-category>
          <tab-control :titles="['综合', '新品', '销量']" @tabClick="tabClick" ref="tabControl2"></tab-control>
          <tab-content-detail :category-detail="showCategoryDetail"></tab-content-detail>
        </div>
      </scroll>

      <tab-contorl
      :titles="['流行','新款','精选']"
      v-show="isTabFixed"
      class="tabcontorl-c fixed"
      @tabClick="tabClick"
      ref="tabControl1"
    />

      <back-top class="back-top" @backTop="backTop" v-show="showBackTop" />

    </div>
  </div>
</template>

<script>

import NavBar from "@/components/common/navbar/NavBar";
import TabMenu from "./childComps/TabMenu";
import TabControl from "@/components/content/tabContorl/TabContorl.vue";
import TabContentDetail from "./childComps/TabContentDetail";
import TabContentCategory from "./childComps/TabContentCategory";

import TabContorl from "@/components/content/tabContorl/TabContorl";
/*
导入请求相关方法
*/
import {
  getCategory,
  getSubcategory,
  getCategoryDetail
} from "@/network/category.js";
/*
导入插件
*/
import Scroll from "@/components/content/scroll/Scroll";
import { POP, NEW, SELL } from "@/common/const/index.js";

import {mixinGoTop} from "@/common/utils/mixin.js";

export default {
  mixins:[mixinGoTop],

  data() {
    return {
      categories: [], // 类别列表
      categoryData: {}, // 子类别数据
      currentIndex: -1,
      currentType: POP,
      isTabFixed:false,
      tabOffsetTop: 0,
    };
  },
  created() {
    // 1.请求分类列表
    this._getCategory();
  },
  computed: {
    showSubcategory() {
      if (this.currentIndex === -1) return {};
      return this.categoryData[this.currentIndex].subcategories;
    },
    showCategoryDetail() {
      if (this.currentIndex === -1) return [];
      return this.categoryData[this.currentIndex].categoryDetail[
        this.currentType
      ];
    }
  },
  methods: {
    _getCategory() {
      getCategory().then(res => {
        // 1.获取分类数据
        this.categories = res.data.category.list;
        // 2.初始化每个类别的子数据
        for (let i = 0; i < this.categories.length; i++) {
          this.categoryData[i] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: []
            }
          };
        }
        // 3.请求第一个分类的数据
        this._getSubcategories(0);
      });
    },
    _getSubcategories(index) {
      // 请求分类数据
      this.currentIndex = index;
      const mailKey = this.categories[index].maitKey;
      getSubcategory(mailKey).then(res => {
        this.categoryData[index].subcategories = res.data;
        this.categoryData = { ...this.categoryData };
        this._getCategoryDetail(POP);
        this._getCategoryDetail(SELL);
        this._getCategoryDetail(NEW);
        // 下次更新DOM时,获取新的tabOffsetTop值(不保险,可以在updated钩子中获取)
        this.$nextTick(() => {
          this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
        });

      });
    },
    _getCategoryDetail(type) {
      // 1.获取请求的miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      // 2.发送请求,传入miniWallkey和type
      getCategoryDetail(miniWallkey, type).then(res => {
        // 3.将获取的数据保存下来
        this.categoryData[this.currentIndex].categoryDetail[type] = res;
        this.categoryData = { ...this.categoryData };
      });
    },
    /**
     * 事件响应相关的方法
     */
    selectItem(index) {
      this._getSubcategories(index);
    },
    tabClick(index) {  // 接受子组件$emit传来的tabClick自定义事件，携带了index参数
      switch (index) {
        case 0:
          this.currentType = POP;
          break;
        case 1:
          this.currentType = NEW;
          break;
        case 2:
          this.currentType = SELL;
          break;
      }
      this.$refs.tabControl1.currIndex = index; // 让两个选项卡当前hover保持一致
      this.$refs.tabControl2.currIndex = index; // 让两个选项卡当前hover保持一致
    },
     // scroll滚动事件，传过来的position包含了x、y轴信息
    contentScroll(position) {
      // 1.决定tabFixed是否显示
      this.isTabFixed = position.y < -this.tabOffsetTop;
      // 2.决定backTop是否显示，mixin中
      this.listenShowBackTop(position);
    },
    // 加载更多。监听子组件emit过来的：加载到底部的事件
    loadMore() {
      this._getSubcategories(this.currentType);
    }
  },
  components: {
    NavBar,
    TabMenu,
    Scroll,
    TabControl,
    TabContentDetail,
    TabContentCategory,
    TabContorl
  }
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/extend.scss";

#category {
  height: 100vh;
}

.category-nav-bar {
  @extend .zhubg_color;
  color: #fff;
}

.content {
  position: absolute;
  top: 0.86rem;
  left: 0;
  right: 0;
  bottom: 58px;
  overflow: hidden;

  display: flex;
}

#tab-content {
  height: 100%;
  flex: 1;
}

.back-top{z-index: 9999;}

.tabcontorl-c {
  background: #ffffff;
  position: sticky;
  top: 0.86rem;
  z-index: 300;
}
.fixed {
  position: fixed;
  left: 100px;
  right: 0;
  top: 0.86rem;
}
</style>